<template>
  <div style="" class="main" v-if="nodes.indexOf('3')!=-1">
    <!-- 时间选择 -->
    <div class="datetype">
      <div class="dated">
        <el-tabs type="border-card" v-model="thisQuery.tabPosition" @tab-click="handleClickAll">
          <el-tab-pane label="全部" name="1"></el-tab-pane>
          <el-tab-pane label="本周" name="2"></el-tab-pane>
          <el-tab-pane label="本月" name="3"></el-tab-pane>
          <el-tab-pane label="本季度" name="4"></el-tab-pane>
          <el-tab-pane label="全年" name="5"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="block" style="width:350px;float:left">
        <!-- <span class="demonstration">自定义：</span> -->
        <el-date-picker v-model="thisQuery.defaultDate" @change="handleClickAll" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>

    </div>
    <!-- 曲线图 -->
    <div class="one_line_box">
      <div class="title">应收款</div>
      <div class="allmoney">￥{{one.allmoney}}</div>
      <div id="chartLineOne" class="one_line"></div>
      <hr class="hr" />
      <div class="datas">
        <el-row>
          <el-col :span="8" style="text-align:left"><span class="labels">未还金额：</span><span
              class="jenos">{{one.no_paid_money}}</span></el-col>
          <el-col :span="8" style="text-align:center"><span class="labels">已还金额：</span><span
              class="jenos">{{one.paid_money}}</span></el-col>
          <el-col :span="8" style="text-align:right"><span class="labels">逾期率：</span><span
              class="jenos">{{one.yql}}%</span></el-col>
        </el-row>
      </div>
    </div>

    <!-- <div id="chartLine" class="one_line"></div> -->
    <!-- 柱状图 -->
    <!-- <div id="Columnar" class="line-columnar"></div> -->
    <div class="one_line_box">
      <div class="title">应付款</div>
      <div class="allmoney">￥{{two.allmoney}}</div>
      <div id="Columnar" class="line-columnar"></div>
      <hr class="hr" />
      <div class="datas">
        <el-row>
          <el-col :span="6" style="text-align:left"><span class="labels">首打款应付：</span><span
              class="jenos">{{two.first_should}}</span></el-col>
          <el-col :span="6" style="text-align:center"><span class="labels">首打款实付：</span><span
              class="jenos">{{two.first_paid}}</span></el-col>
          <el-col :span="6" style="text-align:right"><span class="labels">分期应付：</span><span
              class="jenos">{{two.fen_should}}</span></el-col>
          <el-col :span="6" style="text-align:right"><span class="labels">分期实付</span><span
              class="jenos">{{two.fen_paid}}</span></el-col>
        </el-row>
      </div>
    </div>
    <div class="clear"></div>
    <!-- 折线图 -->
    <div class="two_line_box">
      <div id="two_line" class="two_line"></div>
    </div>
    <!-- 饼状图 城市统计-->
    <div class="one_pie_box">
      <div class="title2">各城市数据统计</div>
      <div class="datas2">
        <el-row>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总债权</span><br /><span class="jenos2">{{four.all_creditor}}</span></el-col>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总订单数</span><br /><span class="jenos2">{{four.all_order}}</span></el-col>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总利息</span><br /><span class="jenos2">{{four.all_rate}}</span></el-col>
          <el-col :span="6" style="text-align:center"><span class="labels">总服务费</span><br /><span
              class="jenos2">{{four.all_server}}</span></el-col>
        </el-row>
      </div>
      <hr class="hr" />
      <div id="chartPieCity" class="pie-wrap"></div>
    </div>
    <div class="one_pie_box">
      <div class="title2">各城市排名统计</div>
      <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
      <el-tabs v-model="CityRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%"
        @tab-click="cityRank">
        <el-tab-pane label="总债权" name="1"></el-tab-pane>
        <el-tab-pane label="总订单数" name="2"></el-tab-pane>
        <el-tab-pane label="总利息" name="3"></el-tab-pane>
        <el-tab-pane label="总服务费" name="4"></el-tab-pane>
      </el-tabs>
      <div class="rank">
        <div class="gd">
          <el-tabs v-model="CityRankingData.type" @tab-click="cityRank">
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="本周" name="2"></el-tab-pane>
            <el-tab-pane label="本月" name="3"></el-tab-pane>
            <el-tab-pane label="本季度" name="4"></el-tab-pane>
            <el-tab-pane label="全年" name="5"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="defualt">
          <el-date-picker @change="cityRank" v-model="CityRankingData.defaultDate" type="daterange"
            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
      </div>
      <div class="list_box">
        <div class="lis" v-for="(item,index) in CityRankingData.list" :key="index">
          <el-row style="height:100%">
            <el-col :span="2">
              <div class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]">{{index+1}}
              </div>
            </el-col>
            <el-col :span="17">{{item.city_name}}</el-col>
            <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 饼状图 商户统计-->
    <div class="one_pie_box">
      <div class="title2">商户统计</div>
      <div class="datas2">
        <el-row>
          <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">商户总数</span><br /><span class="jenos2">{{five.countall}}</span></el-col>
          <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">新增</span><br /><span class="jenos2">{{five.new}}</span></el-col>
          <el-col :span="8" style="text-align:center"><span class="labels">待审核</span><br /><span
              class="jenos2">{{five.no_check}}</span></el-col>
        </el-row>
      </div>
      <hr class="hr" />
      <div id="chartPieMerchant" class="pie-wrap"></div>
    </div>
    <div class="one_pie_box">
      <div class="title2">各商户排名统计</div>
      <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
      <el-tabs v-model="MerchantRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%"
        @tab-click="merchantRank">
        <el-tab-pane label="初审数" name="7"></el-tab-pane>
        <el-tab-pane label="进件数" name="8"></el-tab-pane>
        <el-tab-pane label="签约数" name="1"></el-tab-pane>
        <!-- <el-tab-pane label="逾期数" name="2"></el-tab-pane> -->
        <el-tab-pane label="结清数" name="3"></el-tab-pane>
        <el-tab-pane label="总债权" name="4"></el-tab-pane>
        <el-tab-pane label="应收总利息" name="5"></el-tab-pane>
        <el-tab-pane label="总服务费" name="6"></el-tab-pane>
      </el-tabs>
      <div class="rank">
        <div class="gd">
          <el-tabs v-model="MerchantRankingData.type" @tab-click="merchantRank">
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="本周" name="2"></el-tab-pane>
            <el-tab-pane label="本月" name="3"></el-tab-pane>
            <el-tab-pane label="本季度" name="4"></el-tab-pane>
            <el-tab-pane label="全年" name="5"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="defualt">
          <el-date-picker @change="merchantRank" v-model="MerchantRankingData.defaultDate" type="daterange"
            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
      </div>
      <div class="list_box">
        <div class="lis" v-for="(item,index) in MerchantRankingData.list" :key="index">
          <el-row style="height:100%">
            <el-col :span="2">
              <div class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]">{{index+1}}
              </div>
            </el-col>
            <el-col :span="17">{{item.merchant_name}}</el-col>
            <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 饼状图 销售统计-->
    <div class="one_pie_box">
      <div class="title2">销售统计</div>
      <div class="datas2">
        <el-row>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总债权</span><br /><span class="jenos2">{{four.all_creditor}}</span></el-col>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总业绩</span><br /><span class="jenos2">{{four.all_project_money}}</span></el-col>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总订单数</span><br /><span class="jenos2">{{four.all_order}}</span></el-col>
          <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span
              class="labels">总利息</span><br /><span class="jenos2">{{four.all_rate}}</span></el-col>
        </el-row>
      </div>
      <hr class="hr" />
      <div id="chartPieSale" class="pie-wrap"></div>
    </div>
    <div class="one_pie_box">
      <div class="title2">销售排名统计</div>
      <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
      <el-tabs v-model="SaleRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%"
        @tab-click="saleRank">
        <el-tab-pane label="销售总额" name="1"></el-tab-pane>
        <el-tab-pane label="初审数" name="2"></el-tab-pane>
        <el-tab-pane label="进件数" name="4"></el-tab-pane>
        <el-tab-pane label="签约数" name="3"></el-tab-pane>
        <!-- <el-tab-pane label="逾期率" name="4"></el-tab-pane> -->
      </el-tabs>
      <div class="rank">
        <div class="gd">
          <el-tabs v-model="SaleRankingData.type" @tab-click="saleRank">
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="本周" name="2"></el-tab-pane>
            <el-tab-pane label="本月" name="3"></el-tab-pane>
            <el-tab-pane label="本季度" name="4"></el-tab-pane>
            <el-tab-pane label="全年" name="5"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="defualt">
          <el-date-picker @change="saleRank" v-model="SaleRankingData.defaultDate" type="daterange"
            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
      </div>
      <div class="list_box">
        <div class="lis" v-for="(item,index) in SaleRankingData.list" :key="index">
          <el-row style="height:100%">
            <el-col :span="2">
              <div class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]">{{index+1}}
              </div>
            </el-col>
            <el-col :span="17">{{item.sale_name}}</el-col>
            <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 卡片统计 -->
    <div class="card_box" v-bind:style="[{backgroundImage:'url('+ (card.img[index]) +')'}]"
      v-for="(item,index) in card.list" :key="index">
      <div class="card_title">{{item.title}}</div>
      <div class="all_count"><span class="all_count_num">{{item.no+item.refuse+item.pass}}</span>个</div>
      <div class="cardlists">
        <el-row>
          <el-col :span="8"><span>{{item.foot_one}}&nbsp;</span><span class="numm">{{item.no}}</span></el-col>
          <el-col :span="8" style="text-align:center"><span>{{item.foot_two}}&nbsp;</span><span
              class="numm">{{item.refuse}}</span></el-col>
          <el-col :span="8" style="text-align:right"><span>{{item.foot_three}}&nbsp;</span><span
              class="numm">{{item.pass}}</span></el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    formatDate
  } from '@/utils/formatDate.js';
  import png1 from '@/assets/images/1.png';
  import png2 from '@/assets/images/2.png';
  import png3 from '@/assets/images/3.png';
  import png4 from '@/assets/images/4.png';
  import png5 from '@/assets/images/5.png';
  import png6 from '@/assets/images/6.png';
  import * as echarts from 'echarts';
  import {
    getNodes
  } from '@/utils'
  require('echarts/theme/macarons'); //引入主题
  require('echarts/theme/shine'); //引入主题
  import {
    getRegion,
    getMainDatas,
    cityRank,
    merchantRank,
    saleRank
  } from '@/api/finance'
  export default {
    data() {
      return {
        card: {
          img: [png1, png2, png3, png4, png5, png6],
          list: []
        },
        nodes: [],
        city: [],
        activeName: '2',
        CityRankingData: {
          city: '',
          label: '1',
          type: '1',
          defaultDate: '',
          list: []
        },
        MerchantRankingData: {
          merchant: '',
          label: '1',
          type: '1',
          defaultDate: '',
          list: []
        },
        SaleRankingData: {
          sale: '',
          label: '1',
          type: '1',
          defaultDate: '',
          list: []
        },
        thisQuery: {
          tabPosition: '3',
          defaultDate: '',
        },
        chartPie: null,
        chartLine: null,
        chartColumnar: null,
        value: '',
        start: '',
        legendY: '20%',
        legendX: '15%',
        pie_color: ['#1890FF', '#36CBCB', '#975FE5', '#F2637B', '#FBD437', '#4ECB73', '#34E7C9', '#39ACE9', '#F1B919',
          '#EE7953', '#E872AC', '#FD948E',
        ],
        one: {
          allmoney: '15689.5', //总金额
          no_paid_money: '1589.5', //未还
          paid_money: '15689.5', //已还
          yql: '11', //逾期率
          data_x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          data_y: [0, 0, 0, 0, 0, 0, 0],
          interval: 0
        },
        two: {
          allmoney: '15689.5', //总金额
          first_should: '1589.5', //首次应付
          first_paid: '15689.5', //首次已付
          fen_should: '158263', //分期应付
          fen_paid: '87961', //分期已付
          data_x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          data_y: [0, 0, 0, 0, 0, 0, 0],
        },
        three: {
          interval: 0,
          should_pay: [100, 100, 10, 10, 10, 10, 10],
          should_get: [20, 30, 40, 50, 60, 70, 70],
          // labels:['本金','利息','滞纳金','毛利润'],

          benjin: [0, 0, 0, 0, 0, 0, 0], //本金
          late_free: [0, 0, 0, 0, 0, 0, 0], //滞纳金
          money_rate: [0, 0, 0, 0, 0, 0, 0], //利息
          profit: [0, 0, 0, 0, 0, 0, 0], //毛利润

        },
        four: {
          legend: ['杭州', '成都', '重庆', '长沙'],
          title: '销售额',
          element: 'chartPieCity',
          all_creditor: '0',
          all_order: '0',
          all_rate: '0',
          all_server: '0',
          all_project_money: '0',
          series_data: [{
              value: 335,
              name: '杭州'
            },
            {
              value: 310,
              name: '成都'
            },
            {
              value: 234,
              name: '重庆'
            },
            {
              value: 135,
              name: '长沙'
            },
          ],
        },
        five: {
          legend: ['A级', 'B级', 'C级', 'D级', 'E级'],
          title: '商户级别',
          element: 'chartPieMerchant',
          legendY: '20%',
          legendX: '15%',
          series_data: [{
              value: 35,
              name: 'A级'
            },
            {
              value: 46,
              name: 'B级'
            },
            {
              value: 17,
              name: 'C级'
            },
            {
              value: 12,
              name: 'D级'
            },
            {
              value: 9,
              name: 'E级'
            },
          ],
          countall: 0,
          new: 0,
          no_check: 0
        },
        six: {
          legend: ['正常', '买断', '绿通'],
          title: '销售额',
          element: 'chartPieSale',
          legendY: '35%',
          legendX: '8%',
          all_creditor: '0',
          all_order: '0',
          all_rate: '0',
          all_server: '0',
          series_data: [{
              value: 0,
              name: '正常'
            },
            {
              value: 0,
              name: '买断'
            },
            {
              value: 0,
              name: '绿通'
            },
          ],
        },
      }
    },
    mounted() {
      this.$nextTick(() => {


        this.drawPieChart(this.four);
        this.drawPieChart(this.five);
        this.drawPieChart(this.six);
        this.drawColumnar(this.thisQuery);
      })
    },
    created() {
      this.getRegionList();
      this.getMainDatas();
      this.cityRank();
      this.merchantRank();
      this.saleRank();
      this.nodes = getNodes()
    },

    methods: {
      getMainDatas() {
        getMainDatas(this.thisQuery).then(res => {
          this.one = res.data.one;
          this.two = res.data.two;
          this.three = res.data.three;
          this.four = res.data.four;
          this.five = res.data.five;
          this.six = res.data.six;
          this.card.list = res.data.card_data;
          this.four.element = 'chartPieCity';
          this.four.title = '销售额';
          this.five.element = 'chartPieMerchant';
          this.five.title = '商户级别';
          this.six.element = 'chartPieSale';
          this.six.title = '业绩';
          this.drawLineOneChart();
          this.drawColumnar();
          this.drawLineTwoChart();
          this.drawPieChart(this.four);
          this.drawPieChart(this.five);
          this.drawPieChart(this.six);

        })
      },

      cityRank() {
        cityRank(this.CityRankingData).then(res => {
          this.CityRankingData.list = res.data;
        })
      },
      merchantRank() {
        merchantRank(this.MerchantRankingData).then(res => {
          this.MerchantRankingData.list = res.data;
        })
      },
      saleRank() {
        saleRank(this.SaleRankingData).then(res => {
          this.SaleRankingData.list = res.data;
        })
      },
      drawPieChart(datas) {
        let mytextStyle = {
          color: "#333",
          fontSize: 15,
          lineHeight: 20
        };
        let mylabel = {
          show: true,
          position: "right",
          offset: [30, 40],
          formatter: '{b} : {c} ({d}%)',
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById(datas.element), 'macarons');
        this.chartPie.setOption({
          //             title: {
          //               text: datas.title,
          //               x: '46pt',
          //               y: '20pt',
          //               textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          //                 fontFamily: 'Arial, Verdana, sans...',
          //                 fontSize: 18,
          //                 color:'#222',
          //                 fontWeight: 'normal',
          //               },
          //             },
          grid: [{
            left: '50',
            bottom: '10',
            top: '10',
            right: '10'
          }],
          color: this.pie_color,
          legend: {
            itemWidth: 15,
            itemHeight: 15,
            textStyle: mytextStyle,
            icon: "circle",
            orient: "vertical",
            right: this.legendX,
            height: "auto",
            itemGap: 5,
            // x:'right',      //可设定图例在左、右、居中
            y: 'center', //可设定图例在上、下、居中
            padding: [0, 40, 40, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            data: datas.legend,
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {

            }
          },
          series: [{
            //name: '访问来源',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['40%', '45%'],
            data: datas.series_data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              emphasis: mylabel,
              position: 'inner',
              show: false,
            },
            itemStyle: {
              normal: {
                borderWidth: 8,
                /*隔开的白色边界*/
                borderColor: '#fff',
                /*border*/
                labelLine: {
                  show: false
                }
              },
            },
          }]
        });
      },
      drawLineOneChart() {
        this.chartLine = echarts.init(document.getElementById('chartLineOne'), 'shine'); // 基于准备好的dom，初始化echarts实例
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          // legend: {
          //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
          // },
          calculable: true,
          // 设置折线图的大小
          // grid:{
          //     x:20,
          //     y:5,
          //     x2:5,
          //     y2:20,
          //     borderWidth:1
          // },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
              interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
              rotate: 0 // 横坐标上label的倾斜度
            },
            show: false,
            axisTick: {
              show: false
            },
            data: this.one.data_x,
            axisLabel: {
              interval: this.one.interval, //每四个点显示一个标签
            }
          }],
          yAxis: [{
            type: 'value',
            show: false,
            max: Math.max.apply(null, this.one.data_y),
            min: 0,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }, //去除网格线
          }],

          series: [{
            // name:'邮件营销',
            type: 'line',
            stack: '总量',
            data: this.one.data_y,
            smooth: true,
            areaStyle: {
              normal: {
                // color: '#091e3b', //改变区域颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5FC1BB' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#ceecea' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#fff' // 100% 处的颜色
                }]), //背景渐变色
              }
            },
            itemStyle: {
              normal: {
                color: "#5FC1BB",
                lineStyle: {
                  color: "#5FC1BB"
                }
              }
            },
          }, ],
          grid: {
            left: "5%",
            right: "5%"
          }
        };
        // 使用刚指定的配置项和数据显示图表
        this.chartLine.resize(); //直接加这句即可
        this.chartLine.setOption(option);
      },
      drawLineTwoChart() {
        this.chartLine = echarts.init(document.getElementById('two_line'), 'shine'); // 基于准备好的dom，初始化echarts实例
        let option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: "#fff",
            borderColor: "#eee",
            borderWidth: 1,
            textStyle: 'color:#eee;font-size:12px;',
            extraCssText: "width:120px;",
            padding: [20, 150, 20, 20],
          },
          legend: {
            data: ['应收金额', '应付金额']
          },
          color: ['#1890FF', '#2FC25B', '#fff', '#fff', '#fff', '#fff'],
          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
              interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
              rotate: 0 // 横坐标上label的倾斜度
            },
            axisTick: {
              show: false
            },
            data: this.one.data_x,
            axisLabel: {
              interval: this.one.interval, //每四个点显示一个标签
            }
          }],
          yAxis: {
            type: 'value',
            min: 0, // y轴最小刻度值
            max: Math.max.apply(null, this.one.data_y),
            splitLine: {
              lineStyle: {
                color: ['#eee'], // 设置网格线颜色
                width: 1, // 设置网格线宽度
                type: 'solid' // 设置网格虚线(dashed)、实线(solid)
              },
              show: true // 是否显示网格线
            },
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: '#555666',
                type: 'solid'
              }
            },
          },

          series: [{
              name: '应收金额',
              type: 'line',
              data: this.one.data_y,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#1890FF"
                  }
                }
              },
              emphasis: { // 高亮
                label: {
                  show: true,
                  textStyle: {
                    color: '#333333',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '应付金额',
              type: 'line',
              data: this.two.data_y,
              show: false,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#2FC25B",
                  }
                }
              },
            },
            {
              name: '本金',
              type: 'line',
              data: this.three.benjin,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "rgba(0, 0, 0, 0)",
                  }
                }
              },
            },
            {
              name: '利息',
              type: 'line',
              data: this.three.money_rate,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "rgba(0, 0, 0, 0)",
                  }
                }
              },
            },
            {
              name: '滞纳金',
              type: 'line',
              data: this.three.late_free,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "rgba(0, 0, 0, 0)",
                  }
                }
              },
            },
            {
              name: '毛利润',
              type: 'line',
              data: this.three.profit,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "rgba(0, 0, 0, 0)",
                  }
                }
              },
            },
          ],
          grid: {
            left: "7%",
            right: "5%"
          }
        };
        // 使用刚指定的配置项和数据显示图表
        this.chartLine.resize(); //直接加这句即可
        this.chartLine.setOption(option);
      },
      drawColumnar() {
        // 实例化echarts对象
        this.chartColumnar = echarts.init(document.getElementById('Columnar'), 'shine'); // 基于准备好的dom，初始化echarts实例
        // 绘制条形图
        var option = {
          // X轴
          tooltip: {
            trigger: 'axis'
          },
          calculable: true,
          xAxis: {
            show: false,
            data: this.two.data_x
          },
          // Y轴
          yAxis: {
            show: false,
          },
          // 数据
          series: [{
              // name: '衣服',
              type: 'bar',
              data: this.two.data_y,
              itemStyle: {
                normal: {
                  color: "#1890FF",
                  lineStyle: {
                    color: "#1890FF"
                  }
                }
              },
            },

          ]
        };

        this.chartColumnar.setOption(option);
      },
      getRegionList() {
        getRegion(this.rankingdata).then(response => {
          this.city = response.data
        })
      },
      handleClickAll(tab, event) {
        this.getMainDatas();
      },
    }
  }
</script>

<style scope>
  .card_box {
    width: 30%;
    background: #fff;
    border-radius: 8pt;
    margin-top: 24pt;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 7.5%;
    margin-top: 24pt;
    margin-left: 2%;
    float: left;
    color: #fff;
    position: relative;
  }

  .card_title {
    top: 8.5%;
    left: 8.5%;
    font-size: 14px;
    position: absolute;
  }

  .all_count {
    top: 30%;
    left: 8.5%;
    font-size: 14px;
    position: absolute;
  }

  .all_count_num {
    font-weight: 700;
    font-size: 38px;
  }

  .cardlists {
    width: 83%;
    height: 23.4%;
    top: 76.5%;
    left: 8.5%;
    position: absolute;
    border-top: 1px solid #e8e8e8;
    line-height: 44pt;
    font-size: 14px;
  }

  .numm {
    font-weight: 600;
  }

  .rank {
    width: 90%;
    margin-left: 5%;
    /* border:1px solid red */
  }

  .gd {
    width: 50%;
    float: left;
    color: #555658;
    font-size: 14px;
    cursor: pointer;
  }

  .defualt {
    width: 50%;
    float: left;
  }

  .gdchoose1 {
    color: #1890FF
  }

  .gd .el-tabs__nav-wrap::after {
    background-color: #fff !important;
  }

  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 100% !important;
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #1890FF;
    background-color: #fff;
  }

  .el-tabs--border-card {
    box-shadow: none;
    border: none;
    width: 348pt;
    height: 24pt;
    border: 1px solid #eee
  }

  .el-tabs--border-card>.el-tabs__header {
    border-bottom: none;
    background-color: #fff
  }

  .el-tabs--border-card>.el-tabs__header .el-tabs__item {
    border: #DCDFE6 1px solid;
    width: 70pt;
    text-align: center;
  }

  /* .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{border:#1890ff 1px solid;} */
  .el-range-editor--medium.el-input__inner {
    height: 30pt;
    margin-top: 1px;
    border-radius: 0;
  }

  .list_box {
    width: 90%;
    margin-left: 5%;
    height: 260pt;
    margin-top: 40pt;
    overflow: auto;
  }

  .list_box::-webkit-scrollbar {
    width: 2pt;
  }

  .list_box::-webkit-scrollbar-thumb {
    width: 2pt;
    background: #D9EDFF;
  }

  .list_box::-webkit-scrollbar-button {
    display: none
  }

  .lis {
    width: 100%;
    height: 40pt;
    border: 1px solid #fff;
    line-height: 40pt;
    font-size: 15px;
    color: #555658;
    border-bottom: 1px solid #e8e8e8;
  }

  .num {
    width: 20px;
    height: 20px;
    background: #F0F2F5;
    margin-top: 13pt;
    line-height: 20px;
    ;
    color: #555658;
    border-radius: 20px;
    text-align: center;
  }

  .firstt {
    background: #FFD13B;
    color: #fff;
  }

  .second {
    background: #ECECDB;
    color: #fff;
  }

  .third {
    background: #E6812F;
    color: #fff;
  }

  .main {
    width: 100%;
    height: 2100pt;
    background: #F0F2F5;
    padding-top: 24pt;
    font-size: 12pt;
    color: #000;
  }

  .datetype {
    width: 100%;
    height: 32pt;
    margin-left: 2%;
  }

  .dated {
    width: 370pt;
    height: 100%;
    float: left;
    border: 1px solid #eee
  }

  .dated .el-tabs__content {
    display: none;
  }

  .dated .el-tabs__nav-scroll {
    width: 370pt;
  }

  .grid-content {
    border: 1px solid #ccc;
    cursor: pointer;
    height: 32pt;
    line-height: 32pt;
    text-align: center;
  }

  .pie-wrap {
    width: 100%;
    height: 350pt;
  }

  .title {
    color: #86888b;
    font-size: 15px;
    margin-left: 5%;
  }

  .title2 {
    color: #1890FF;
    font-size: 15px;
    margin-left: 5%;
  }

  .allmoney {
    color: #242526;
    font-size: 18px;
    margin-left: 5%;
    margin-top: 8pt;
    font-weight: 800;
  }

  .one_line_box {
    width: 46%;
    background: #fff;
    border-radius: 2pt;
    padding-top: 20pt;
    height: 188pt;
    margin-top: 24pt;
    margin-left: 2%;
    float: left;
  }

  .two_line_box {
    width: 94%;
    background: #fff;
    border-radius: 2pt;
    height: 276pt;
    margin-top: 24pt;
    margin-left: 2%;
    float: none
  }

  .one_pie_box {
    width: 46%;
    background: #fff;
    border-radius: 2pt;
    height: 404pt;
    margin-top: 24pt;
    margin-left: 2%;
    float: left;
    padding-top: 24pt;
  }

  .one_line,
  .line-columnar {
    width: 100%;
    height: 58pt;
  }

  .two_line {
    width: 100%;
    height: 100%;
  }

  .hr {
    width: 90%;
    margin-left: 5%;
    margin-top: 16pt;
    border: #e8e8e8 1px solid
  }

  .datas {
    width: 90%;
    margin-left: 5%;
    margin-top: 20pt;
  }

  .datas2 {
    width: 90%;
    margin-left: 5%;
    margin-top: 16pt;
    line-height: 20px;
  }

  .labels {
    color: #86888b;
    font-size: 14px;
  }

  .jenos {
    color: #212121;
    font-size: 14px;
    font-weight: 600;
  }

  .jenos2 {
    color: #86888b;
    font-size: 14px;
  }

  .clear {
    clear: both;
  }
</style>
